portabilityfandomcom-20200223-history
User blog:MACH-59330/Building Better Boxes: Themes and Accents
Hey! I'm Speedit from the Vanguard team, here to tackle the topic of infobox theming. '' infobox on Nukapedia is the main element to the article lede. It's noticeable because it's large and colourful.|thumb|right|200px|link=w:c:fallout:Fallout 4]] Infoboxes are a fundamental, high-profile element of most wiki articles that gathers key facts on the article’s subject. A well-designed infobox will set the bar for an attractive article, so pay the layout good attention to make sure it ticks that box! There are two ways to customize the appearance of Portable Infoboxes - CSS theming and accent styling. The design of the Portable Infobox product makes one fundamental change. Any markup added to change the presentation is split from the content. This means that Fandom’s servers can understand and digest the information properly. The change paves the way to greater things - better adaptability for mobile devices, more machine-friendliness for search engine crawlers and huge potential for Fandom’s content APIs. Infobox design To prepare the design of a portable infobox, you need to adapt the layout of the template. That's controlled by the markup for the infobox. The infobox tags listed in each have their meaning to editors and machines. It is important to start by using the right tags on an infobox template to ensure correct layout. Modifying the design of a portable infobox will require an understanding of CSS - this guide provides a good basis for understanding CSS. The CSS for the portable infoboxes are stored in your wiki’s stylesheets, such as MediaWiki:Common.css for all desktop skins and MediaWiki:Wikia.css for Oasis. All the infoboxes have a .portable-infobox class. The elements that make up your infobox also have classes, listed at . It is advisable for you to start with a base theme design (to meet the needs of the whole wiki). This will allow you to adapt the infobox styling on a deeper level to fit your needs, through CSS theming or accent styling. CSS theming Theming is a versatile CSS tool. You can use it to provide consistency between different infobox designs when migrating your infoboxes. Each design aspect can also be changed centrally, which is highly useful in the case of color schemes and visual tweaks. A lot of wikis have a panoply of color schemes, formatting needs and layouts between templates. You can use theming to achieve this effect too. Infobox themes To add theming to a specific set of infoboxes or an individual infobox only, the theme parameter is used in the infobox. This is done by adding theme="THEMENAME" to the tag, and styling the .pi-theme-''THEMENAME'' class. The theme name can describe a type, a design variant or a specific template. You can use theme to increase the width of all infoboxes for the wiki’s media articles. Using CSS, you can also customize any element inside that infobox theme - like tweaking the horizontal groups of an episode infobox. theme attribute example Here's how Undertale Wiki centered the labels for their music infobox. Template: CSS: .pi-theme-music .pi-data-label, .pi-theme-music .pi-data-value { text-align: center; } Result: Undertale Wiki Memory.png|The music infobox for Memory on the Undertale Wiki now has centered data labels.|link=w:c:undertale:Memory Undertale Wiki Determination.png|This customization now applies to all music infoboxes, so it carries over to Determination.|link=w:c:undertale:Determination Per-article theming The theme-source attribute allows adding a second .pi-theme- class to the infobox. However, theme-source is different to theme because it is added from the article. You can use theme-source to change the visual styling of an article’s infobox, without creating a new template for each article. You can also use it to introduce a subtheme, changing the infobox’s themed styling depending on what parameter is in the theme-source. This comes in handy when changing the color scheme of an in-universe article infobox depending on an association with something else. theme-source attribute example For example, Wookieepedia uses theme-source parameters to apply color theming to its character infoboxes based on their allegiance. Kylo Ren infobox theme source from Wookieepedia.png|The Kylo Ren character infobox has a dark red color scheme that reflects his Sith allegiance.|link=w:c:starwars:Kylo Ren Luke Skywalker infobox theme source from Wookieepedia.png|Meanwhile, Luke Skywalker’s infobox has a gold color scheme to show that he is a Jedi.|link=w:c:starwars:Luke Skywalker Take a look at how it’s done: Template: Article: CSS theming: .pi-theme-jedi .pi-title { background: #736326; } Accent styling Accent styling for infoboxes is aimed at making per-article and per-template customization easier. This is done by placing simple controls in the article's source. These allows more basic changes to the color scheme for each template and article. Accent styling allows you to give your infoboxes customization without the right access to or knowledge of CSS. It also falls into a bigger picture, where Fandom can provide tools for you to recolor all elements from the article, and without introducing inline styling. The French One Piece Encyclopédie uses accent colors to great effect, applying matching color schemes between character infoboxes and the character design. The editors of the wiki can recolor the infoboxes from the article itself. Doflamingo infobox accent color at One Piece Encyclopédie.png|The Doflamingo article infobox at One Piece Encyclopédie has been given pink headers and purple text.|link=w:c:fr.onepiece:Don Quichotte Doflamingo Monkey D. Luffy infobox accent color at One Piece Encyclopédie.png|Meanwhile, the infobox in the Luffy article has yellow headers and red text.|link=w:c:fr:onepiece:Monkey D. Luffy Accent styling by default There are two default accent color parameters you can place in the infobox template to recolor its headers and titles: ;accent-color-default :This is used to change the background color of the template’s title and header elements. ;accent-color-text-default :The text color of the template’s header and title elements is changed with this parameter. It is possible to avoid using CSS theming for recoloring elements this way. However, one wiki stylesheet may be easier to maintain than default coloring for a set of infoboxes. Choose what will work best for you in your case, and don’t hesitate to ask below if you need help deciding. Accent source styling The two accent styling source parameters are special. These let you use a template parameter to change the color of your infobox template in the article, which is what the One Piece Encyclopédie did. ;accent-color-source :Applies a color input to the background of the infobox’s title and header elements. ;accent-color-text-source :Applies the color input to the infobox’s header and title text. Do note that the only accent styling input the infobox accepts are hex colors. Your feedback on the accent styling feature, and your ideas for features in portable infoboxes, are always welcome. Accent styling example ' color scheme now matches the Red Hair Pirates - and his own hair.|link=w:c:fr.onepiece:Shanks|thumb|right|200px]] Here's how the One Piece Encyclopédie colored Shanks' infobox red, to match his affiliation with the Red Hair Pirates. Template: Article: Conclusion You can theme your portable infoboxes using CSS and accent styling. It is highly advisable to work from a base theme that matches your wiki’s needs. We used: * theme to add CSS to our infobox templates, * theme-source to show the schism in the Force, * and accent styling to give Doflamingo a flamboyant color scheme! You may find there’s new things to learn and a few new limits to adapt to. Hopefully, you can still push through and use Portable Infoboxes to redefine your editing and customization habits. Category:Blog posts